<template>
	<view class="pageview flex flex-direction" :style="skin">
		<div class="top-wrap">
			<zx-nav color="#000000" noBack noTitle>
				<view slot="left">
					交易大厅
					<!-- <image @tap="navTo('/pages/quickOrder/quickOrder')" class="jsxd" src="/static/241226/jsxd.png" mode="widthFix"></image> -->
				</view>
				<searchbar slot="center" bg="#EFEFEF"></searchbar>
			</zx-nav>
		</div>
		<div class="flex-sub margin-top-sm" style="min-height: 0; position: relative">
			<scroll-view class="menu" scroll-y scroll-with-animation>
				<view
					v-for="(item, index) in cateList"
					:key="index"
					class="tab-bar-item flex align-center justify-center"
					:class="[currentTab == index ? 'active' : '']"
					@tap.stop="swichNav(index)"
				>
					<text :style="{ color: item.color }">{{ item.name }}</text>
				</view>
			</scroll-view>
			<div class="tab-view u-flex-col">
				<filterbar @changeFilrer="changeFilrer"></filterbar>
				<view class="tip"><rich-text :nodes="sysInfo.home_set.class_info"></rich-text></view>
				<view class="u-flex-1" style="overflow: auto">
					<mescroll-uni ref="mescrollRef" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" :fixed="false">
						<view class="menulist">
							<view class="menu-item" v-for="(item, index) in goodslist" :key="index" @tap="selctProduct(item)">
								<skeleton v-if="item.skeleton" size="small"></skeleton>
								<view class="u-flex" v-else>
									<div class="imgbox"><image :src="item.img_url + '?imageView2/0/w/180'" mode="widthFix"></image></div>
									<view class="u-flex-1 u-flex-col">
										<view class="u-line-1 name">{{ item.name }}</view>
										<view class="u-flex u-flex-between u-flex-1 u-flex-items-center">
											<view class="text-cut u-flex-1"></view>
											<view class="price u-primary ml20">
												<text class="num">{{ item.min_price }}~{{ item.max_price }}</text>
												<text>/扎</text>
											</view>
										</view>
										<view class="u-flex u-flex-between mt8 align-center">
											<view class="sales">成交{{ item.total_sales }}扎</view>
											<view class="stock ml20">{{ item.total_stock }} 扎在售</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</div>
		</div>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations } from 'vuex';
import searchbar from '@/components/searchbar.vue';
import filterbar from '@/components/filterbar';
import skeleton from '@/components/skeleton';
import sharemixin from '@/common/sharemixin.js';
export default {
	data() {
		return {
			menulist: [],
			currentTab: 0,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			goodslist: [],
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				}
			},

			isInit: false,
			filter: {},
			follow_count: 0,
			share_title: '交易大厅'
		};
	},
	components: { searchbar, filterbar, skeleton },
	mixins: [MescrollMixin, sharemixin],
	computed: {
		...mapState(['cateId', 'isLogin', 'cartNum', 'sysInfo', 'appName']),
		cateList() {
			if (this.isLogin) {
				return [
					{
						name: '我的常用',
						id: 'follow',
						count: this.follow_count
					},
					...this.menulist
				];
			} else {
				return this.menulist;
			}
		}
	},
	created() {
		this.getCateList();
		this.share_title = this.appName + this.share_title;
	},
	onShow() {
		if (this.cateList.length > 0) {
			/* 判断分类是否改变，如果改变这刷新，没有改变则不刷新 */
			let currentTab = this.isLogin ? 1 : 0;
			if (this.cateId) {
				let index = this.cateList.findIndex(item => item.id == this.cateId);
				currentTab = index;
			} else {
				if (this.menulist && this.menulist.length > 0) {
					this.SET_CATEID(this.menulist[0].id);
				}
			}
			if (currentTab != this.currentTab) {
				this.currentTab = currentTab;
				if (this.isInit && this.mescroll) {
					let num = this.cateList[this.currentTab].count >= 6 ? 6 : this.cateList[this.currentTab].count;
					let goodslist = [];
					for (var i = 0; i < num; i++) {
						goodslist.push({
							skeleton: true
						});
					}
					this.goodslist = [...goodslist];
					this.mescroll.resetUpScroll();
					this.mescroll.scrollTo(0, 0);
				}
			}
		}
		this.setCartNum(this.cartNum || '0');
	},
	methods: {
		...mapMutations(['SET_KEYWORD', 'SET_CATEID', 'setCartNum']),
		navTo(path) {
			uni.navigateTo({
				url: path
			});
		},
		swichNav(current) {
			let cur = current;
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				let cateId = this.cateList[this.currentTab].id;
				this.SET_CATEID(cateId);
				this.$nextTick(() => {
					let num = this.cateList[this.currentTab].count >= 6 ? 6 : this.cateList[this.currentTab].count;
					let goodslist = [];
					for (var i = 0; i < num; i++) {
						goodslist.push({
							skeleton: true
						});
					}
					this.goodslist = [...goodslist];
					this.mescroll.resetUpScroll();
					this.mescroll.scrollTo(0, 0);
				});
			}
		},
		scroll: function (e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
			// 自动加载当前tab的数据
			if (!this.isInit && this.cateList.length > 0 && this.cateId) {
				this.isInit = true; // 标记为true
				this.mescroll.resetUpScroll();
			}
		},
		upCallback() {
			this.getProductTypeList();
		},
		/* 获取商品分类 */
		getCateList() {
			this.$postAction(this.$api.getCateList, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					this.menulist = [...da.data];
					this.follow_count = da.follow_count;
					if (this.cateId) {
						if (this.cateId == 'follow' && this.isLogin) {
							this.currentTab = 0;
						} else {
							this.currentTab = this.menulist.findIndex(item => item.id == this.cateId) + (this.isLogin ? 1 : 0);
						}
					} else {
						this.currentTab = this.isLogin ? 1 : 0;
						this.SET_CATEID(this.menulist[0].id);
					}
					if (!this.isInit) {
						this.isInit = true; // 标记为true
						this.mescroll.triggerUpScroll();
					}
				}
			});
		},
		/* 获取产品 */
		getProductTypeList() {
			let pageNum = this.mescroll.num || 1; // 页码, 默认从1开始
			let pageSize = this.mescroll.size || 10;
			let param = {
				page: pageNum,
				limit: pageSize,
				...this.filter
			};
			let url = this.$api.getProductTypeList;
			if (this.cateId) {
				if (this.cateId == 'follow') {
					param.follow = 1;
				} else {
					param.class_id = this.cateId || '';
				}
			}
			this.$postAction(
				url,
				{ ...param },
				{
					custom: {
						ShowLoading: false
					}
				}
			)
				.then(da => {
					if (da.code == 0 && da.data && da.data.length > 0) {
						let curPageData = da.data;
						console.log('da.count', da.count, curPageData.length);
						this.mescroll.endBySize(curPageData.length, da.count);
						if (this.mescroll.num == 1) this.goodslist = []; //如果是第一页需手动制空列表
						this.goodslist = this.goodslist.concat(curPageData); //追加新数据
					} else {
						this.goodslist = [];
						this.mescroll.endSuccess(0, false);
					}
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		selctProduct(info) {
			uni.navigateTo({
				url:
					'/pages/proDetails/proDetails?pname=' +
					info.name +
					'&pid=' +
					info.id +
					'&min_price=' +
					info.min_price +
					'&max_price=' +
					info.max_price +
					'&supplier_count=' +
					info.supplier_count +
					'&product_color_=' +
					info.product_color_
			});
		},
		changeFilrer(param) {
			this.filter = {};
			if (param && Object.keys(param).length > 0) {
				for (var key in param) {
					if (param[key]) {
						if (key == 'color') {
							this.filter['product_color'] = param[key];
						} else {
							this.filter['order_by_type'] = param[key];
							this.filter['order_by'] = key;
						}
					}
				}
			}

			this.$nextTick(() => {
				let num = this.menulist[this.currentTab].count >= 6 ? 6 : this.menulist[this.currentTab].count;
				let goodslist = [];
				for (var i = 0; i < num; i++) {
					goodslist.push({
						skeleton: true
					});
				}
				this.goodslist = [...goodslist];
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			});
		},

		//跳转页面
		href(item) {
			if (item.url) {
				uni.navigateTo({
					url: item.url
				});
			}
		},
		searchKeyword() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		showContact() {
			this.$refs.contact.show();
		}
	}
};
</script>

<style lang="scss">
page,
.pageview {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #fff;
	.top-wrap {
		.jsxd {
			width: 138upx;
			height: 64upx;
		}
	}
	.menu {
		height: 100%;
		width: 180upx;
		background: #f3f4f5;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1;
		.tab-bar-item {
			height: 82upx;
			color: #000;
			font-size: 26upx;
			background: #f3f4f5;
			padding: 0 30upx;
			&.active {
				color: var(--nav-bg) !important;
				background: #fff;
				font-weight: bold;
				font-size: 28upx;
				position: relative;
				&::before {
					content: '';
					display: block;
					width: 6upx;
					height: 44upx;
					position: absolute;
					background: linear-gradient(0, #ff8173 0%, #ff3543 100%);
					left: 0;
					top: 50%;
					margin-top: -22upx;
					border-radius: 0 20upx 20upx 0;
				}
			}
		}
	}

	.tab-view {
		height: 100%;
		overflow: hidden;
		position: relative;
		padding-left: 180upx;
		.menulist {
			padding: 20upx;
			.menu-item {
				color: #424242;
				font-size: 28upx;
				margin-bottom: 12upx;
				border-bottom: 1px solid rgba(229, 229, 229, 0.36);
				padding-bottom: 12upx;
				.imgbox {
					width: 140upx;
					height: 140upx;
					position: relative;
					border-radius: 8upx;
					margin-right: 22upx;
					overflow: hidden;
					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.u-flex-1 {
					min-width: 0;
					min-height: 0;
				}
				.price {
					font-size: 22upx;
					.num {
						font-size: 32upx;
						font-weight: 500;
					}
				}
				.name {
					font-size: 32upx;
					font-weight: 500;
					color: #1c1c1e;
				}
				.stock {
					min-width: 120upx;
					height: 46upx;
					padding: 0 16upx;
					background: rgba(229, 229, 229, 0.36);
					border-radius: 4upx;
					color: #2c2c2e;
					font-size: 22upx;
					text-align: center;
					line-height: 46upx;
				}
				.sales {
					font-size: 24upx;
					color: #aeaeb2;
					line-height: 33upx;
				}
			}
		}
		.tip {
			font-size: 24upx;
			color: #8e8e93;
			padding: 16upx 20upx;
		}
	}
}
/* 筛选 */
.drawer-modal {
	text-align: left;
	.title {
		font-size: 30upx;
		color: #000;
	}

	.cu-tag {
		padding: 0 48upx;
		height: 60upx;
		margin: 20upx 1.5%;
		width: 22%;
	}

	.filterftbar {
		padding: 30upx 0;
		span {
			width: 150upx;
			height: 60upx;
			line-height: 60upx;
			color: #fc743b;
			border: 1px solid #fc743b;
			border-radius: 10upx;
			text-align: center;

			& + span {
				margin-left: 120upx;
				color: #fff;
				background-image: linear-gradient(90deg, #fe8c2d, #fe5504);
			}
		}
	}
}
</style>
